@(label: Option[gitbucket.core.model.Label],
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@defining(label.map(_.labelId).getOrElse("new")){ labelId =>
<div id="edit-label-area-@labelId">
  <form class="form-inline" autocomplete="off">
    <input type="text" id="labelName-@labelId" style="width: 300px; float: left; margin-right: 4px;" class="form-control input-sm" value="@label.map(_.labelName)"@if(labelId == "new"){ placeholder="New label name"}/>
    <div id="label-color-@labelId" class="input-group color bscp" data-color="#@label.map(_.color).getOrElse("888888")" data-color-format="hex" style="width: 100px; float: left;">
      <input type="text" class="form-control input-sm" id="labelColor-@labelId" value="#@label.map(_.color).getOrElse("888888")" style="width: 100px;">
      <span class="input-group-addon"><i style="background-color: #@label.map(_.color).getOrElse("888888");"></i></span>
    </div>
    <script>
    $('div#label-color-@labelId').colorpicker({format: "hex"});
    </script>
    <span class="pull-right">
      <span id="label-error-@labelId" class="error"></span>
      <input type="button" id="cancel-@labelId" class="btn btn-sm btn-default label-edit-cancel" value="Cancel">
      <input type="button" id="submit-@labelId" class="btn btn-sm btn-success" style="margin-bottom: 0px;" value="@(if(labelId == "new") "Create label"  else "Save changes")"/>
    </span>
  </form>
</div>
<script>
$(function(){
  $('#submit-@labelId').click(function(e){
    $.post('@helpers.url(repository)/issues/labels/@{if(labelId == "new") "new" else s"$labelId/edit"}', {
      'labelName' : $('#labelName-@labelId').val(),
      'labelColor': $('#labelColor-@labelId').val()
    }, function(data, status){
      $('div#edit-label-area-@labelId').remove();
      @if(labelId == "new"){
        $('#new-label-table').hide();
        // Insert row into the top of table
        $('#label-row-header').after(data);
      } else {
        // Replace table row
        $('#label-row-@labelId').after(data).remove();
      }
    }).fail(function(xhr, status, error){
      var errors = JSON.parse(xhr.responseText);
      if(errors.labelName){
        $('span#label-error-@labelId').text(errors.labelName);
      } else if(errors.labelColor){
        $('span#label-error-@labelId').text(errors.labelColor);
      } else {
        $('span#label-error-@labelId').text('error');
      }
    });
    return false;
  });

  $('#cancel-@labelId').click(function(e){
    $('div#edit-label-area-@labelId').remove();
    @if(labelId == "new"){
      $('#new-label-table').hide();
    } else {
      $('#label-@labelId').show();
    }
  });
});
</script>
}
